import { useEffect, useState } from 'react';
import { Layout, Menu, Card } from 'antd';
import {
    UserOutlined,
    BookOutlined,
    StarOutlined,
    SettingOutlined
} from '@ant-design/icons';
import './index.scss';
import Profile from './components/Profile';
import ProfileForm from './components/ProfileForm';
import { getUserInfo } from '@/api/user';
import { NullAble } from '@pangza-club/utils/types';



const { Content, Sider } = Layout;

const UserProfile = () => {
    const [selectedMenu, setSelectedMenu] = useState('1');
    const [isEditing, setIsEditing] = useState(false);
    const [user, setUser] = useState<NullAble<UserVO>>(null);
    useEffect(() => {
        init();
    }, []);

    function init() {
        getUserInfo().then(userInfo => {
            setUser(userInfo);
        })
    }


    return (
        <Layout style={{ backgroundColor: '#fff' }}>
            <Sider width={200} theme="light">
                <Menu
                    mode="inline"
                    selectedKeys={[selectedMenu]}
                    onSelect={({ key }) => setSelectedMenu(key)}
                    style={{ height: '100%' }}
                >
                    <Menu.Item key="1" icon={<UserOutlined />}>
                        个人资料
                    </Menu.Item>
                    <Menu.Item key="2" icon={<BookOutlined />}>
                        做题记录
                    </Menu.Item>
                    <Menu.Item key="3" icon={<StarOutlined />}>
                        收藏题目
                    </Menu.Item>
                    <Menu.Item key="4" icon={<SettingOutlined />}>
                        账号设置
                    </Menu.Item>
                </Menu>
            </Sider>

            <Content style={{ padding: '24px', minHeight: 280 }}>
                {
                    user && <Card>
                        {isEditing ? <ProfileForm onFinish={init} setEditeState={setIsEditing} userData={user} /> : <Profile setEditeState={setIsEditing} userData={user} />}
                    </Card>
                }
            </Content>
        </Layout>
    );
};

export default UserProfile; 